import React, { PureComponent, Fragment } from 'react';

import { Table, Icon, Popconfirm, Divider, message,Form,Card,Select,Input,Button } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import styles from '../../Repair.less';
import { getAuthority } from '@/utils/authority';
import RenderAuthorized from '@/components/Authorized';
const Authorized = RenderAuthorized(getAuthority());   
const {Option} = Select ;
const currentYear = new Date().getFullYear();
const years =
  [
    { nodeName: currentYear,     key: currentYear },
    { nodeName: currentYear - 1, key: currentYear - 1 },
    { nodeName: currentYear - 2, key: currentYear - 2 },
    { nodeName: currentYear - 3, key: currentYear - 3 },
  ];
@Form.create()
@connect(({pipingRoad,loading,assessment,global})=>({
    currentUrl:global.currentUrl,
    elementAuth:global.elementAuth,
    StatisticList:pipingRoad.StatisticList,
    companyList: assessment.companyList,
    loading:loading.effects['pipingRoad/fetchStatisticList']
}))
export default class PipingRoadForStatistic extends PureComponent {
    returnColumn = () => {

        return [
            {
                title: '序号',
                dataIndex: 'index',
                render: (text, record, index) => `${index + 1}`,
                width: 50,

            },
            {
                title: '月份',
                dataIndex: 'yf',
                width: 50,

            },
            {
                title: '下水道养护方式',
                children: [
                    {
                        title: '管理疏通（m）',
                        dataIndex: 'gdst',
                        width: 50,
                    },
                    {
                        title: '清理淤泥（桶）',
                        dataIndex: 'qlyn',
                        width: 50,
                    }
                    ,
                    {
                        title: '疏通管道规格',
                        children: [
                            {
                                title: 'Φ  110（m）',
                                dataIndex: 'stgdgg110',
                                width: 50,
                            },
                            {
                                title: 'Φ  225（m）',
                                dataIndex: 'stgdgg225',
                                width: 50,
                            },
                            {
                                title: 'Φ  300（m）',
                                dataIndex: 'stgdgg300',
                                width: 50,
                            },
                            {
                                title: 'Φ  400（m）',
                                dataIndex: 'stgdgg400',
                                width: 50,
                            },
                            {
                                title: 'Φ  450（m）',
                                dataIndex: 'stgdgg450',
                                width: 50,
                            },
                            {
                                title: 'Φ  600（m）',
                                dataIndex: 'stgdgg600',
                                width: 50,
                            },
                            {
                                title: 'Φ  800（m）',
                                dataIndex: 'stgdgg800',
                                width: 50,
                            },
                            {
                                title: 'Φ  1000（m）',
                                dataIndex: 'stgdgg1000',
                                width: 50,
                            },
                            {
                                title: 'Φ  1200（m）',
                                dataIndex: 'stgdgg1200',
                                width: 50,
                            },
                            {
                                title: 'Φ  1350（m）',
                                dataIndex: 'stgdgg1350',
                                width: 50,
                            },
                            {
                                title: 'Φ  1500（m）',
                                dataIndex: 'stgdgg1500',
                                width: 50,
                            },
                            {
                                title: 'Φ  1800（m）',
                                dataIndex: 'stgdgg1800',
                                width: 50,
                            }
                        ]
                    }
                ]
            },
        ];
    }
    fetchStatisticList = ({ year = currentYear, department = null } = {}) => {
        this.props.dispatch({
            type: 'pipingRoad/fetchStatisticList',
            payload: {
                year: year,
                department: department,
   
            },
            callback: response => {

                message.error.error('获取清单失败');
                console.log(response);

            },
        });
    }
    fetchGetCompany = () => {

        this.props.dispatch({
          type: 'assessment/fetchGetCompany',
          payload: {
            type: '养护维修',
          },
          callback: response => {
            message.error.error('养护单位获取失败');
            console.log(response);
          },
        });
      }
    resetData = () => {

        const { form } = this.props;
        form.resetFields();
        this.fetchStatisticList();
    }
    queryList=()=>{
        const { form } = this.props;
        form.validateFieldsAndScroll((err, values) => {
          if (!err) {
            
                this.fetchStatisticList(values);
          }
        }); 
    }
    getAuth = () => {
        const { dispatch, currentUrl } = this.props;
        
        dispatch({
          type: 'global/fetchAuthorityElements',
          payload: { url: currentUrl },
        });
      };
    componentDidMount = () => {
        this.fetchStatisticList();
        this.getAuth ();
        if (!this.props.companyList) this.fetchGetCompany();
    }
    render() {
        const { loading, StatisticList,companyList,elementAuth} = this.props;
        const { getFieldDecorator } = this.props.form;
        return (
            <>
                <Card style={{ margin: '10px' }}>
                    <Form layout="inline">
                    <Authorized authority={elementAuth['selectOrg']}>
                        <Form.Item label="养护单位">
                            {getFieldDecorator('department', { initialValue: null })(
                                <Select style={{ width: 120 }} style={{ width: '200px' }} >
                                    {companyList && companyList.map(item =>
                                        <Option key={item.Id} value={item.Id}>
                                            {item.Name}
                                        </Option>
                                    )}
                                </Select>
                            )}
                        </Form.Item ></Authorized>
                        <Form.Item label="年份">
                            {getFieldDecorator('year', { initialValue: currentYear })(
                                <Select style={{ width: 120 }} style={{ width: '200px' }} >
                                    {years.length > 0
                                        ? years.map(item =>
                                            <Option key={item.key} value={item.key}>
                                                {item.nodeName}
                                            </Option>
                                        )
                                        : null}
                                </Select>
                            )}
                        </Form.Item >
                     
                        <Form.Item >
                            <Button type="primary" onClick={this.queryList}>查询 </Button>
                        </Form.Item >
                        <Form.Item >
                            <Button onClick={this.resetData}>重置</Button>
                        </Form.Item >
                    </Form>
                </Card>
                <Table
                    className={styles.RepairTable}
                    size="small"
                    align={'center'}
                    bordered
                    loading={loading}
                    dataSource={StatisticList}
                    columns={this.returnColumn()}
                />
            </>
        )
    }

}